<template>
  <div class="live" style="padding-top: 90px">
    <div class="live-navs">
      <router-link
        :class="{ navActive: activeIdx == 0 }"
        to="/live"
        @click.native="setActive(0)"
        >大触直播</router-link
      >
      <router-link
        :class="{ navActive: activeIdx == 1 }"
        to="/live/dctwo"
        @click.native="setActive(1)"
        >大触专访</router-link
      >
      <router-link
        :class="{ navActive: activeIdx == 2 }"
        to="/live/dcthree"
        @click.native="setActive(2)"
        >大触周边</router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "LiveView",
  data() {
    return {
      activeIdx: 0,
    };
  },
  created() {
    console.log("大触父组件创建了");
    this.activeIdx = sessionStorage.getItem("liveActive") || 0;
    this.$store.commit("setTabbarVisibal", false);
  },
  methods: {
    setActive(idx) {
      this.activeIdx = idx;
      sessionStorage.setItem("liveActive", idx);
    },
  },
  beforeDestroy() {
    this.$store.commit("setTabbarVisibal", true);
  },
};
</script>

<style lang="scss" scoped>
.live-navs {
  display: flex;
  justify-content: space-around;
  height: 50px;
  > a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: gray;
    text-align: center;
    line-height: 50px;
    &.navActive {
      color: blue;
      position: relative;
      &::after {
        content: "";
        height: 2px;
        width: 24px;
        background-color: blue;
        position: absolute;
        bottom: 5px;
        left: calc(50% - 12px);
      }
    }
  }
}
</style>
